<template>
  <el-dialog
      :title="isUpdate?'修改无人机':'添加无人机'"
      :visible="visible"
      width="520px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px">
      <el-form-item label="飞机ID:" prop="plane_id">
        <el-input v-model="form.plane_id" :maxlength="40" placeholder="飞机ID" />
      </el-form-item>
      <el-form-item label="机场ID:" prop="airport_id">
        <el-input v-model="form.airport_id" :maxlength="40" placeholder="机场ID" />
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input v-model="form.name" :maxlength="40" placeholder="名称" />
      </el-form-item>
      <el-form-item label="1路直播链接:" prop="video_url">
        <el-input v-model="form.video_url" type="textarea" autosize placeholder="1路视频直播链接" />
      </el-form-item>
      <el-form-item label="2路直播链接:" prop="video_url2">
        <el-input v-model="form.video_url2" type="textarea" autosize placeholder="2路视频直播链接" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data() {
    return {
      form: {
        plane_id: '',
        airport_id: '',
        name: '',
        video_url: '',
        video_url2: ''
      },
      rules: {
        plane_id: [
          {required: true, message: '请输入无人机唯一标识', trigger: 'blur'}
        ],
        airport_id: [
          {required: true, message: '请输入机场id', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入无人机名称', trigger: 'blur'}
        ],
        video_url: [
          {required: true, message: '请输入1路视频直播链接', trigger: 'blur'}
        ],
        video_url2: [
          {required: true, message: '请输入2路视频直播链接', trigger: 'blur'}
        ]
      },
      loading: false,
      isUpdate: false
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.form = Object.assign({}, val)
          this.isUpdate = true
        } else {
          this.isUpdate = false
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.pid) {
            this.form.level = 2
          } else {
            this.form.level = 1
          }
          this.loading = true
          this.$http.post('/uav/save', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              if (!this.isUpdate) {
                this.form = {}
              }
              this.updateVisible(false)
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(e => {
            this.loading = false
            this.$message.error(e.message)
          });
        } else {
          return false
        }
      })
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
